<template>
   <div>
     <!-- 面包屑导航 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
     </el-breadcrumb>
      <!-- 卡片栏 -->
     <el-card class="box-card">
         <div class="buttonTop"><el-button type="primary" >添加角色</el-button></div>
          <!-- 表单区域 -->
         <template>
            <el-table :data="rolesList" style="width: 100%" border stripe>
              <el-table-column type="expand">
                  <template slot-scope="scope">
                      <el-row v-for="(item,index) in scope.row.children" :key="index" :class="index==0?'bdtop':''">
                          <!-- 渲染一级权限列表 -->
                          <el-col :span="6">
                              <el-tag closable @close="deleteSub(scope.row,item.id)">{{item.authName}}</el-tag>
                              <i class="el-icon-caret-right"></i>
                          </el-col>
                          <!-- 渲染二级三级权限列表 -->
                          <el-col :span="18">
                              <!-- 二级权限列表 -->
                              <el-row v-for="(val,index) in item.children" :key="index">
                                   <el-col :span="8">
                                        <el-tag type="success" closable @close="deleteSub(scope.row,val.id)">{{val.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                   </el-col>
                                    <!-- 三级权限列表 -->
                                   <el-col :span="16">
                                       <el-tag type="warning" v-for="(item,index) in val.children"
                                        :key="index" closable @close="deleteSub(scope.row,item.id)">{{item.authName}}</el-tag>
                                   </el-col>
                              </el-row>
                          </el-col>
                      </el-row>
                  </template>
              </el-table-column>
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="roleName" label="角色名称"></el-table-column>
              <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
              <el-table-column label="操作">
                  <!-- 作用域插槽 -->
                  <template slot-scope="scope"> 
                    <!-- 修改用户 -->
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogVisible = true"></el-button>
                     <!-- 删除用户 -->
                     <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRoles(scope.row.id)"></el-button>
                     <!-- 分配权限 -->
                     <el-tooltip effect="dark" content="分配权限" placement="top-end" :enterable="false">
                        <el-button type="warning" icon="el-icon-setting" size="mini" @click="rolesTreeFrom(scope.row)"></el-button>
                     </el-tooltip>   
                  </template>
              </el-table-column>
            </el-table>
         </template>
         <!-- 对话框 权限分配区域 -->
         <el-dialog title="提示" :visible.sync="rolesVisible" width="50%" @close="closeRoles">
                <el-tree :data="roleTree" :props="rolesProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef">

                </el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="rolesVisible = false">取 消</el-button>
                    <el-button type="primary" @click="allotRights">确 定</el-button>
                </span>
         </el-dialog>   
         <!-- 对话框 编辑区域 -->
         <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" >
                <span>这是一段信息</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
         </el-dialog>      
     </el-card>
   </div>    
</template>
<script>
export default {
    data () {
        return {
            // 角色列表数据
            rolesList:[],
            dialogVisible:false,
            rolesVisible:false,
            // 权限树状列表
            roleTree:[],
            // 默认展开的三级权限id
            defKeys:[],
            // 即将分配权限的角色id
            roleId:'',
            rolesProps: {
             children: 'children',
             label: 'authName'
            }
        }
    },
    created () {
      this.rolesFrom();  
    },
    methods: {
        // 获取角色列表信息表单形式
        async rolesFrom() {
            var {data:res}=await this.$http.get('roles');
            if(res.meta.status==200) {
                this.$message.success(res.meta.msg);
                this.rolesList=res.data;
            }
            else {
                this.$message.error(res.meta.msg);
            }
        },
        // 删除用户
        deleteRoles(val) {
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                var {data:res}=await this.$http.delete('roles/'+val);
                if(res.meta.status==200){
                    this.rolesFrom();
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                }else {
                    this.$message.error(this.meta.msg);
                }  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
            });          
        });
        },
        // 删除权限
        deleteSub(val,id) {
            this.$confirm('此操作将永久删除权限, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                var {data:res}=await this.$http.delete('roles/'+val.id+'/rights/'+id);
                console.log(res);
                if(res.meta.status==200){
                    val.children=res.data;
                }else {
                    this.$message.error('删除权限失败');
                }  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
            });          
        });
        },
        // 获取权限数据树状
        async rolesTreeFrom(role) {
            this.roleId=role.id;
            var {data:res}=await this.$http.get('rights/tree');
            if(res.meta.status==200) {
                this.roleTree=res.data;
                this.$message.success(res.meta.msg);
                this.getLeafKeys(role,this.defKeys);
                this.rolesVisible= true;
            }
            else {
                this.$message.error('获取权限失败');
            }
        },
        // 通过递归的形式获取三级节点
        getLeafKeys(node,arr) {
            // 如果当前节点不包含节点则是三级节点
            if(!node.children) {
                return arr.push(node.id);
            }
            node.children.forEach(item=>
                this.getLeafKeys(item,arr)
            )

        },
        // 当用户关闭对话框时候清空三级权限列表
        closeRoles() {
            this.defKeys=[];
        },
        // 为角色分配权限功能
        async allotRights() {
            var rightsArr=[
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ]
            var rightsStr=rightsArr.join(',');
            var {data:res}=await this.$http.post('roles/'+this.roleId+'/rights',{
            rids:rightsStr
            })
            if(res.meta.status==200) {
                this.$message.success('角色权限更新成功');
                this.rolesFrom();
                this.rolesVisible=false;  
            }
            else {
                this.$message.error('角色权限更新失败');
        }
        }
    }
}
</script>

<style lang="less" scoped>
.buttonTop {
    margin-bottom: 15px;
}
.el-tag {
    margin: 7px;
}
.bdtop {
    border-top: 1px solid #eeeeee;
}
.el-row {
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
}
</style>